<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>物业管理平台</title>
  <th:block th:include="include :: header('H5首页')" />
  <th:block th:include="include :: mobileStatHeader" />
</head>

<body>
<div class="home">
  <div class="statistics">
    <dl>
      <dt>本月应收<em>(元)</em></dt>
      <dd class="f-blue"><p id="monShoule"></p></dd>
    </dl>
    <dl>
      <dt>本月已收<em>(元)</em></dt>
      <dd class="f-green"><p id="monAlready"></p></dd>
    </dl>
    <dl>
      <dt>本月已缴<em>(户)</em></dt>
      <dd class="f-yellow"><p id="monTenant"></p></dd>
    </dl>
    <dl>
      <dt>本月未缴<em>(户数)</em></dt>
      <dd class="f-red"><p id="TenantNot"></p></dd>
    </dl>
  </div>

  <div class="gap"></div>
  <div class="tenantSituation" id="buildingDetail">

  </div>

  <!--</div>-->
  <div class="gap"></div>

  <div class="rentIncrease" id="tenantListId" th:fragment="tenantListId">
    <div class="titleBar tabs-bar">
      <ul>
        <li class="selected">待涨租信息预警</li>
        <li>已涨租信息展示</li>
      </ul>
      <p class="btn-more"><a onclick="moreHigh()">更多</a></p>
    </div>
    <!-- 待涨租信息预警表格只显示最新6条s -->
    <div class="tabs">
      <div class="table">
        <div class="thead">
          <ul>
            <li>
              <p>楼栋</p>
              <p>单元号</p>
              <p>租户名称</p>
              <p>涨租时间</p>
              <p>操作</p>
          </ul>
        </div>
        <div class="tbody">
          <div th:each="newListNot,higherStat : ${listNot}">
            <ul>
              <li>
                <p th:text="${newListNot.buildingName}">楼栋</p>
                <p th:text="${newListNot.unitNameStr}">单元号</p>
                <p th:text="${newListNot.tenantName}">租户名称</p>
                <p th:text="${#calendars.format(newListNot.risePriceFirstTime,'yyyy-MM-dd')}">涨租时间</p>
                <p><a href="javascript:void(0)" class="btn upTenant">确认涨租</a></p>
                <input type="hidden" id="tenantId" name="tenantId" th:value="${newListNot.tenantId}">
                <input type="hidden" id="risePriceRatio" name="risePriceRatio" th:value="${newListNot.risePriceRatio}">
                <input type="hidden" id="monthlyRentFee" name="monthlyRentFee" th:value="${newListNot.monthlyRentFee}">

              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
    <!-- 待涨租信息预警表格e -->
    <!-- 已涨租信息展示表格只显示最新6条s -->
    <div class="tabs none">
      <div class="table">
        <div class="thead">
          <ul>
            <li>
              <p>楼栋</p>
              <p>单元号</p>
              <p>租户名称</p>
              <p>涨租时间</p>
              <p>状态</p>
          </ul>
        </div>
        <div class="tbody">
          <div th:each="listAlread,tenantStat : ${listAlread}">
            <ul>
              <li>
                <p th:text="${listAlread.buildingName}">楼栋</p>
                <p th:text="${listAlread.unitNameStr}">单元号</p>
                <p th:text="${listAlread.tenantName}">租户名称</p>
                <p th:text="${#calendars.format(listAlread.risePriceFirstTime,'yyyy-MM-dd')}"涨租时间</p>
                <p class="f-darkRed">已涨租</p>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
    <!-- 已涨租信息展示表格e -->
  </div>




  <div class="gap"></div>
  <div class="chart">
    <div class="titleBar">应收租金一览</div>
    <div id="chartOne" class="chartItem"></div>
  </div>
  <div class="gap"></div>
  <div class="chart">
    <div class="titleBar">实收租金一览</div>
    <div id="chartTwo" class="chartItem"></div>
  </div>
  <div class="gap"></div>
  <div class="chart">
    <div class="titleBar">涨租情况一览</div>
    <div id="chartThree" class="chartItem"></div>
  </div>
  <div class="gap"></div>
  <div class="chart">
    <div class="titleBar">租户人数一览</div>
    <div id="chartFour" class="chartItem"></div>
  </div>
  <div class="gap"></div>
  <div class="chart">
    <div class="titleBar">出租单元一览</div>
    <div id="chartFive" class="chartItem"></div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: mobileStatFooter" />
<script>
  function upTenantFn(){
      //待涨租框的确认涨租按钮
      $(".upTenant").click(function() {
          var that = $(this);
          $.modal.confirm("确认涨租吗？", function () {
              var tenantId = that.parent().parent().find("input").eq(0).val();
              var risePriceRatio = that.parent().parent().find("input").eq(1).val();
              var monthlyRentFee = that.parent().parent().find("input").eq(2).val();
              var data = new Array();
              data.push({"name": "tenantId", "value": tenantId});
              data.push({"name": "risePriceRatio", "value": risePriceRatio});
              data.push({"name": "monthlyRentFee", "value": monthlyRentFee});
              $.ajax({
                  cache: true,
                  type: "POST",
                  url: ctx + "system/higher/confirm",
                  async: true,
                  data: data,
                  error: function (request) {
                      $.modal.alertError("系统错误");
                  },
                  success: function (data) {
                    getTenantHtmlFragment();
                  }
              });
          });
      });

  }

  function switchTab() {
      $(".tabs-bar li").click(function () {
          var index = $(this).index(".tabs-bar li");
          $(this).addClass("selected").siblings().removeClass("selected");
          $($(".tabs")[index]).show().siblings(".tabs").hide();
      });
  }

    //待涨租框的"更多"按钮
  function moreHigh(){
    window.location.href = 'mobileStat/lists';
  }
  //

  function getTenantHtmlFragment(){
    $.ajax({
      type: "get",
      url: "mobileStat/tenantlist",
      success: function(data) {
        $("#tenantListId").html(data);
        upTenantFn();
        switchTab();
      }
    });
  }

  $(function () {
    getTenantHtmlFragment();
  });


    function setDiv(data){
        var div =  '<h1 class="titleBar">'+data.bulidingName+'</h1>\n' +
            '<div class="item">\n' +
                '<dl>'+
                ' <dt>在租单元</dt>'+
                ' <dd class="f-blue">'+data.unitRenting+'<em>户</em></dd>'+
                ' </dl>'+
                '<dl>'+
                ' <dt>空闲单元</dt>'+
                ' <dd class="f-green">'+data.unitFree+'<em>户</em></dd>'+
                ' </dl>'+
                '<dl>'+
                ' <dt>本月已收金额</dt>'+
                ' <dd class="f-yellow">'+data.alreadyFee+'<em>户</em></dd>'+
                ' </dl>'+
                '<dl>'+
                ' <dt>本月已缴</dt>'+
                ' <dd class="f-red">'+data.tenantAlready+'<em>户</em></dd>'+
                ' </dl>'+
                '</div>';
        return div
    }

  $(function(){
        //应收租金一览
        var chartOne = echarts.init(document.getElementById("chartOne"));
        var option1 = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '12',
            },
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item) {
                result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
              });
              return result;
            },
            axisPointer: {
              type: 'none'
            }
          },
          legend: {
            x: 'center',
            y: 'bottom',
            itemGap: 16,
            itemWidth:16,
            itemHeight:10,
            padding: [23, 20, 0, 0],
            data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
            textStyle: {
              color: '#555',
              fontSize: '11',
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0',
            left: '10',
            right: '12',
            top: '12',
            bottom: '22',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              //	rotate: 35,
              interval: 0,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            data: ['1月', '3月', '5月', '7月', '9月', '11月', ]
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#f4f4f4',
              }
            },
            axisLabel: {
              formatter: '{value}',
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            name: '全园区',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#4c83fd",
                lineStyle: {
                  width: 1.5,
                  color: "#4c83fd",
                }
              }
            },
            data: [1767, 1296, 2184, 1068, 1788, 1264, ],
          }, {
            name: 'A栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#f9ab22",
                lineStyle: {
                  width: 1.5,
                  color: "#f9ab22",
                }
              }
            },
            data: [379, 88, 365, 488, 367, 567, ],
          }, {
            name: 'B栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#7dc855",
                lineStyle: {
                  width: 1.5,
                  color: "#7dc855",
                }
              }
            },
            data: [279, 348, 265, 688, 237, 467, ],
          }, {
            name: 'C栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#fe5e5e",
                lineStyle: {
                  width: 1.5,
                  color: "#fe5e5e",
                }
              }
            },
            data: [179, 248, 165, 288, 137, 367, ],
          }, {
            name: 'D栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#b07cc5",
                lineStyle: {
                  width: 1.5,
                  color: "#b07cc5",
                }
              }
            },
            data: [79, 548, 65, 188, 37, 267, ],
          }]
        };
      //应收租金一览

      //实收租金一览
        var chartTwo = echarts.init(document.getElementById("chartTwo"));
        var option2 = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '12',
            },
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item) {
                result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
              });
              return result;
            },
            axisPointer: {
              type: 'none'
            }
          },
          legend: {
            x: 'center',
            y: 'bottom',
            itemGap: 16,
            itemWidth:16,
            itemHeight:10,
            padding: [23, 20, 0, 0],
            data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
            textStyle: {
              color: '#555',
              fontSize: '11',
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0',
            left: '10',
            right: '12',
            top: '12',
            bottom: '22',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              //	rotate: 35,
              interval: 0,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            data: ['1月', '3月', '5月', '7月', '9月', '11月', ]
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#f4f4f4',
              }
            },
            axisLabel: {
              formatter: '{value}',
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            name: '全园区',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#4c83fd",
                lineStyle: {
                  width: 1.5,
                  color: "#4c83fd",
                }
              }
            },
            data: [1767, 1296, 2184, 1068, 1788, 1264, ],
          }, {
            name: 'A栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#f9ab22",
                lineStyle: {
                  width: 1.5,
                  color: "#f9ab22",
                }
              }
            },
            data: [379, 88, 365, 488, 367, 567, ],
          }, {
            name: 'B栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#7dc855",
                lineStyle: {
                  width: 1.5,
                  color: "#7dc855",
                }
              }
            },
            data: [279, 348, 265, 688, 237, 467, ],
          }, {
            name: 'C栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#fe5e5e",
                lineStyle: {
                  width: 1.5,
                  color: "#fe5e5e",
                }
              }
            },
            data: [179, 248, 165, 288, 137, 367, ],
          }, {
            name: 'D栋',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#b07cc5",
                lineStyle: {
                  width: 1.5,
                  color: "#b07cc5",
                }
              }
            },
            data: [79, 548, 65, 188, 37, 267, ],
          }]
        };
      //实收租金一览

      //涨租情况一览统计图
        var chartThree = echarts.init(document.getElementById("chartThree"));
        var option3 = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '12',
            },
            formatter: function (params) {
              var name = params[0].name + "</br>";
              var str = '';
              var series_colors = ['#538ffe', '#ff6767'];
              var unit = ['元', '户'];
              for (var i = 0; i < params.length; i++) {
                params[i].marker =
                  "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                  series_colors[i] + "'></span>";
                str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + unit[i] + "<br/>";
              }
              return name + str;
            },
          },
          legend: {
            x: 'center',
            y: 'bottom',
            itemGap: 20,
            itemWidth:16,
            itemHeight:10,
            padding: [23, 20, 0, 0],
            data: ['增收情况', '涨租户数'],
            textStyle: {
              color: '#555',
              fontSize: '11',
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0',
            left: '10',
            right: '12',
            top: '12',
            bottom: '22',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              //	rotate: 35,
              interval: 0,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            data: ['1月', '3月', '5月', '7月', '9月', '11月', ]
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#f4f4f4',
              }
            },
            axisLabel: {
              formatter: '{value}',
              show: true,

              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            name: '增收情况',
            type: 'bar',
            barWidth: 13,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#5784ff'
                    },
                    {
                      offset: 1,
                      color: '#55a8fd'
                    }
                  ]
                )
              }
            },
            data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
          }, {
            name: '涨租户数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#fe5e5e",
                lineStyle: {
                  width: 1.5,
                  color: "#fe5e5e",
                }
              }
            },
            data: [579, 648, 465, 588, 437, 667],
          }]
        };
      //涨租情况一览统计图
      //租户人数一览
        var chartFour = echarts.init(document.getElementById("chartFour"));
        var option4 = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '12',
            },
            formatter: function (params) {
              var name = params[0].name + "</br>";
              var str = '';
              var series_colors = ['#538ffe', '#ff6767', '#7dc855', '#fe5e5e', '#b07cc5'];
              for (var i = 0; i < params.length; i++) {
                params[i].marker =
                  "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                  series_colors[i] + "'></span>";
                str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "户<br/>";
              }
              return name + str;
            },
          },
          legend: {
            x: 'center',
            y: 'bottom',
            itemGap: 16,
            itemWidth:16,
            itemHeight:10,
            padding: [23, 20, 0, 0],
            data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
            textStyle: {
              color: '#555',
              fontSize: '11',
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0',
            left: '10',
            right: '12',
            top: '12',
            bottom: '22',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              //	rotate: 35,
              interval: 0,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            data: ['1月', '3月', '5月', '7月', '9月', '11月', ]
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#f4f4f4',
              }
            },
            axisLabel: {
              formatter: '{value}',
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            name: '全园区',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: "#5784ff",
                lineStyle: {
                  width: 1.5,
                  color: "#5784ff",
                }
              }
            },
            data: [767, 996, 884, 1068, 1088, 964, ],
          }, {
            name: 'A栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#f9ab22'
                    },
                    {
                      offset: 1,
                      color: '#ffcd75'
                    }
                  ]
                )
              }
            },
            data: [379, 288, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
          }, {
            name: 'B栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#7dc855'
                    },
                    {
                      offset: 1,
                      color: '#abea8a'
                    }
                  ]
                )
              }
            },
            data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
          }, {
            name: 'C栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#fe5e5e'
                    },
                    {
                      offset: 1,
                      color: '#ff9494'
                    }
                  ]
                )
              }
            },
            data: [179, 248, 165, 288, 137, 367, 156, 384, 268, 388, 164, 282, ],
          }, {
            name: 'D栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#b07cc5'
                    },
                    {
                      offset: 1,
                      color: '#d1a3e3'
                    }
                  ]
                )
              }
            },
            data: [279, 448, 165, 188, 237, 267, 256, 284, 168, 288, 264, 182, ],
          }, ]
        };
      //租户人数一览
      //出租单元一览
        var chartFive = echarts.init(document.getElementById("chartFive"));
        var option5 = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '12',
            },
            formatter: function (params) {
              var name = params[0].name + "</br>";
              var str = '';
              var series_colors = ['#538ffe', '#ff6767', '#7dc855', '#fe5e5e', '#b07cc5'];
              for (var i = 0; i < params.length; i++) {
                params[i].marker =
                  "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                  series_colors[i] + "'></span>";
                str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "户<br/>";
              }
              return name + str;
            },
          },
          legend: {
            x: 'center',
            y: 'bottom',
            itemGap: 16,
            itemWidth:16,
            itemHeight:10,
            padding: [23, 20, 0, 0],
            data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
            textStyle: {
              color: '#555',
              fontSize: '11',
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0',
            left: '10',
            right: '12',
            top: '12',
            bottom: '22',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              //	rotate: 35,
              interval: 0,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            data: ['1月', '3月', '5月', '7月', '9月', '11月', ]
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#f4f4f4',
              }
            },
            axisLabel: {
              formatter: '{value}',
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 12,
                fontWeight: 0,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            name: '全园区',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: "#5784ff",
                lineStyle: {
                  width: 1.5,
                  color: "#5784ff",
                }
              }
            },
            data: [767, 996, 884, 1068, 1088, 964, ],
          }, {
            name: 'A栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#f9ab22'
                    },
                    {
                      offset: 1,
                      color: '#ffcd75'
                    }
                  ]
                )
              }
            },
            data: [379, 288, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
          }, {
            name: 'B栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#7dc855'
                    },
                    {
                      offset: 1,
                      color: '#abea8a'
                    }
                  ]
                )
              }
            },
            data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
          }, {
            name: 'C栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#fe5e5e'
                    },
                    {
                      offset: 1,
                      color: '#ff9494'
                    }
                  ]
                )
              }
            },
            data: [179, 248, 165, 288, 137, 367, 156, 384, 268, 388, 164, 282, ],
          }, {
            name: 'D栋',
            type: 'bar',
            barWidth: 7,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#b07cc5'
                    },
                    {
                      offset: 1,
                      color: '#d1a3e3'
                    }
                  ]
                )
              }
            },
            data: [279, 448, 165, 188, 237, 267, 256, 284, 168, 288, 264, 182, ],
          }, ]
        };
      //出租单元一览

      //模块二 获取父级div对象
      var buildingDetail = document.getElementById('buildingDetail');





      $.ajax({
          cache : true,
          type : "POST",
          url : ctx + "/system/mobileStat/statData",
          async : true,
          error : function(request) {
              $.modal.alertError("系统错误");
          },
          success : function(data) {
              var statData = data.data;
              console.log(statData);

              //mobile首页应收、已收、已缴用户、未缴
              // <---------------------------模块一--------------------------->
              $("#monShoule").text(statData.modelOne.monShould);  //本月应收
              $("#monAlready").text(statData.modelOne.monAlready);  //本月已收
              $("#TenantNot").text(statData.modelOne.TenantNot);  //本月未缴户数
              $("#monTenant").text(statData.modelOne.monTenant);  //已缴费户数
              // <---------------------------模块二--------------------------->
              var html = '';
              //循环加载到页面
              for (var i = 0; i < statData.modelTwo.length; i++) {
                  html += setDiv(statData.modelTwo[i])
              }
              buildingDetail.innerHTML = html;

              //H5应收租金一览
              // <---------------------------模块三--------------------------->
              XAxisData = statData.modelThree.dateList;
              console.log(statData);
              // SeriesDataSum = statData.modelThree.expenseList;
              SeriesDataA = statData.modelThree.buildingA;
              SeriesDataB = statData.modelThree.buildingB;
              SeriesDataC = statData.modelThree.buildingC;
              SeriesDataD = statData.modelThree.buildingD;
              SeriesDataSum = statData.modelThree.buildingSum;


              option1.xAxis[0].data = XAxisData;
              option1.series[0].data = SeriesDataSum;
              option1.series[1].data = SeriesDataA;
              option1.series[2].data = SeriesDataB;
              option1.series[3].data = SeriesDataC;
              option1.series[4].data = SeriesDataD;

              chartOne.setOption(option1);
              //折线图渲染
              window.addEventListener("resize", function () {
                  chartOne.resize()
              })
          }
      });

      // <---------------------------H5实收租金一览--------------------------->

      $.ajax({
          cache : true,
          type : "POST",
          url : ctx + "/system/mobileStat/statDataAlraedy",
          async : true,
          error : function(request) {
              $.modal.alertError("系统错误");
          },
          success : function(data) {
              var statDataAlraedy = data.data;
              console.log(statDataAlraedy);

              XAxisData = statDataAlraedy.modelfive.dateList;

              SeriesDataA = statDataAlraedy.modelfive.buildingaAlready;
              SeriesDataB = statDataAlraedy.modelfive.buildingbAlready;
              SeriesDataC = statDataAlraedy.modelfive.buildingcAlready;
              SeriesDataD = statDataAlraedy.modelfive.buildingdAlready;
              SeriesDataSum = statDataAlraedy.modelfive.buildingSumAlready;

              option2.xAxis[0].data = XAxisData;
              option2.series[0].data = SeriesDataSum;
              option2.series[1].data = SeriesDataA;
              option2.series[2].data = SeriesDataB;
              option2.series[3].data = SeriesDataC;
              option2.series[4].data = SeriesDataD;

              //折线图渲染
              chartTwo.setOption(option2)
              window.addEventListener("resize", function () {chartTwo.resize();
              });

          }
      });

      // <---------------------------H5涨租情况一览--------------------------->
      $.ajax({
          cache : true,
          type : "POST",
          url : ctx + "/system/mobileStat/statDataHighStat",
          async : true,
          error : function(request) {
              $.modal.alertError("系统错误");
          },
          success : function(data) {
              var statDataHighStat = data.data;
              console.log(statDataHighStat);

              XAxisData = statDataHighStat.dateList;

              SeriesDataHighStat = statDataHighStat.highNum;
              SeriesDataHighStatNum = statDataHighStat.highTenantNum;

              option3.xAxis[0].data = XAxisData;
              option3.series[0].data = SeriesDataHighStat;
              option3.series[1].data = SeriesDataHighStatNum;

              //折线图渲染
              chartThree.setOption(option3)
              window.addEventListener("resize", function () {chartThree.resize();
              });

          }
      });

      // <---------------------------H5租户人数预览--------------------------->

      $.ajax({
          cache : true,
          type : "POST",
          url : ctx + "/system/mobileStat/statDataTenantNum",
          async : true,
          error : function(request) {
              $.modal.alertError("系统错误");
          },
          success : function(data) {
              var statDataTenantNum = data.data;
              console.log(statDataTenantNum);

              XAxisData = statDataTenantNum.dateList;

              SeriesDataA = statDataTenantNum.buildingNumA;
              SeriesDataB = statDataTenantNum.buildingNumB;
              SeriesDataC = statDataTenantNum.buildingNumC;
              SeriesDataD = statDataTenantNum.buildingNumD;
              SeriesDataSum = statDataTenantNum.buildingNumAll;

              option4.xAxis[0].data = XAxisData;
              option4.series[0].data = SeriesDataSum;
              option4.series[1].data = SeriesDataA;
              option4.series[2].data = SeriesDataB;
              option4.series[3].data = SeriesDataC;
              option4.series[4].data = SeriesDataD;

              //折线图渲染
              chartFour.setOption(option4)
              window.addEventListener("resize", function () {chartFour.resize();
              });
          }
      });

      // <---------------------------H5出租单元一览--------------------------->

      $.ajax({
          cache : true,
          type : "POST",
          url : ctx + "/system/mobileStat/statDataUnitAlready",
          async : true,
          error : function(request) {
              $.modal.alertError("系统错误");
          },
          success : function(data) {
              var statDataUnitAlready = data.data;
              console.log(statDataUnitAlready);

              XAxisData = statDataUnitAlready.dateList;

              SeriesDataA = statDataUnitAlready.unitNumA;
              SeriesDataB = statDataUnitAlready.unitNumB;
              SeriesDataC = statDataUnitAlready.unitNumC;
              SeriesDataD = statDataUnitAlready.unitNumD;
              SeriesDataSum = statDataUnitAlready.unitNumAll;

              option5.xAxis[0].data = XAxisData;
              option5.series[0].data = SeriesDataSum;
              option5.series[1].data = SeriesDataA;
              option5.series[2].data = SeriesDataB;
              option5.series[3].data = SeriesDataC;
              option5.series[4].data = SeriesDataD;

              //折线图渲染
              chartFive.setOption(option5)
              window.addEventListener("resize", function () {chartFive.resize();
              });

          }
      });

  })





</script>
</body>
</html>
